<template>
	<view class="content cu-list grid">

		<scroll-view scroll-x class="nav-tab-wrap" :throttle="false" @scroll="scrollEvent">
			<view class="nav-tab">
					<view class="nav-tab-item animation-slide-bottom select-tab"
						:style="[{animationDelay: (index + 1)*0.05 + 's'}]" :class="{'active':currentIndex==index}" v-for="(item,index) in tabList"
						@tap="changeTab(index,community)">{{item.text}}
					</view>

				<view class="underline" :style="'left:'+ left +'px;width:'+ width +'px;'"></view>
			</view>
		</scroll-view>

		<view class="list" v-if="currentIndex == 0">
			<view class="h-table">
				<view class="h-tr h-tr-3 h-thead">
					<view class="h-td">场所类型</view>
					<view class="h-td">排查场所数</view>
					<view class="h-td">整改场所数</view>
					<view class="h-td">场所整改率</view>
					<view class="h-td">隐患数</view>
					<view class="h-td">隐患整改数</view>
					<view class="h-td">隐患整改率</view>
				</view>
				<view class="h-tr h-tr-3" v-for="item in tablezero">
					<view class="h-td">{{item.placeType}}</view>
					<view class="h-td">{{item.checkPlaceNum}}</view>
					<view class="h-td">{{item.rectifyPlaceNum}}</view>
					<view class="h-td">{{item.rectifyPlaceRate}}</view>
					<view class="h-td">{{item.dangerNum}}</view>
					<view class="h-td">{{item.dangerRectifyNum}}</view>
					<view class="h-td">{{item.dangerRectifyRate}}</view>
				</view>
			</view>
		</view>

		<view class="list" v-if="currentIndex !=0">
			<view class="h-table">
				<view class="h-tr h-tr-3 h-thead">
					<view class="h-td">{{currentIndex == 3 || currentIndex == 4 ? '社区' : '社区'}}</view>
					<view class="h-td">排查场所数</view>
					<view class="h-td">整改场所数</view>
					<view class="h-td">场所整改率</view>
					<view class="h-td">隐患数</view>
					<view class="h-td">隐患整改数</view>
					<view class="h-td">隐患整改率</view>
				</view>
				<view class="h-tr h-tr-3" v-for="item in tablezero">
					<view class="h-td">{{item.community}}</view>
					<view class="h-td">{{item.checkPlaceNum}}</view>
					<view class="h-td">{{item.rectifyPlaceNum}}</view>
					<view class="h-td">{{item.rectifyPlaceRate}}</view>
					<view class="h-td">{{item.dangerNum}}</view>
					<view class="h-td">{{item.dangerRectifyNum}}</view>
					<view class="h-td">{{item.dangerRectifyRate}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import server from '@/api/server.js'
	export default {
		data() {
			return {
				tablezero: [],
				placeData: [],
				currentIndex: 0, //当前选中的索引值
				tabList: ["全部分类", "分类1", "分类2", "分类3", "分类4", "分类5", "分类6"],
				left: uni.upx2px(20), //滑动条左边距离
				width: uni.upx2px(40), //滑动条宽度
				scrollX: 0, //滚动条的位置
				space: uni.upx2px(20), //滑动条和item的左右间距
				community:'',
			}
		},
		mounted() {
			this.getplacetype();
		},
		methods: {
			changeTab(id, event) {
				var that = this
			  // 如果选择的和当前激活的不同
			  if (id !== this.activeId) {
			    this.activeId = id;
			    // 计算当前按钮的位置，看是否需要移动
			    const spanLeft = event.clientX; // 当前点击的元素左边距离
			    const divBox = that.$el.querySelector(".select-tab").clientWidth / 2; // 点击的元素一半宽度
			    const totalWidths = document.body.clientWidth; // 屏幕总宽度
			    const widths = totalWidths / 2; // 一半的屏幕宽度
			    const spanRight = totalWidths - spanLeft; // 元素的右边距离
			    const scrollBox = that.$el.querySelector(".nav-tab"); // 获取最外层的元素
			    const scrollL = scrollBox.scrollLeft; // 滚动条滚动的距离
			    // 当元素左边距离 或者 右边距离小于100时进行滑动
			    if (spanRight < 100 || spanLeft < 100) {
			      scrollBox.scrollLeft = scrollL + (spanLeft - widths) + divBox;
			    }
			  }
			},
			getplacetype() {
				this.$http.get('/sys/dict/getDictItems/place_type').then(res => {
					if (res.data.success) {
						// this.dictOptions = res.data.result;
						let obj = {}
						this.placeData = res.data.result
						obj.text = '总体情况'
						// obj.value = ''
						this.placeData.unshift(obj)
						console.log(this.placeData)
						this.tabList = this.placeData
					}
				})
			},
			changeTab(num,community) {
				console.log(num,community)
				if(community != undefined){
					this.community = community
				}
				let that = this;
				that.currentIndex = num;
				let selectorQuery = uni.createSelectorQuery().in(that);
				selectorQuery.selectAll('.nav-tab-item').boundingClientRect(function(data) {
					// data 为当前选中tab的节点信息
					that.left = data[num].left + that.scrollX + that.space;
					that.width = data[num].width - that.space * 2;
				}).exec();
				if (num == 0) {
					server.queryAll({deptId:community}).then(res => {
						console.log(res)
						this.tablezero = res.data.result
					})
				} else {
					server.queryPlaceType({
						placeType: num,
						deptId:community
					}).then(res => {
						console.log(res)
						this.tablezero = res.data.result
					})
				}
			},
			scrollEvent(e) {
				this.scrollX = e.detail.scrollLeft;
			}
		}
	}
</script>


<style lang="scss">
	.list {
		margin-top: 10px;
		float: left;
		width: 100%;
		padding: 5px;
		background: #e9e9e9;
	}

	.nav-tab-wrap {
		width: 100%;
		white-space: nowrap;

		.nav-tab {
			position: relative;

			.nav-tab-item {
				margin-right: 60rpx;
				line-height: 80rpx;
				display: inline-block;
				color: #333333;
				font-weight: bold;
				font-size: 30rpx;

				&:nth-of-type(1) {
					margin-left: 60rpx;
				}

				// &.active{
				// 	color: #FF6100;![在这里插入图片描述](https://img-blog.csdnimg.cn/20210316110536246.gif)

				// }
			}

			.underline {
				position: absolute;
				width: 40rpx;
				height: 5rpx;
				background-color: #0081ff;
				left: 20rpx;
				bottom: 0;
				transition: 0.4s;
			}
		}
	}
	.select-tab{
		display: inline-block;
	}
</style>
